<template>

  <van-nav-bar>


    <template #left>

      <div class="container">

        <div class="left">
          <div class="date">{{ getCurrentDate }}</div>
          <div class="month">{{ monthNames[getCurrentMonthIndex] }}</div>
        </div>
        <div class="middle">
          <van-divider vertical />
        </div>
        <div class="right">早上哈</div>

      </div>



    </template>

  </van-nav-bar>



</template>


<script setup>
import { computed } from 'vue';


const getCurrentDate = computed(() => {
  return new Date().getDate()
})
const getCurrentMonthIndex = computed(() => {
  return new Date().getMonth()
});

const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];




</script>



<style scoped>
.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.right {
  margin-left: 10px;
}

:deep(.van-nav-bar__content) {
  height: 60px;
}


:deep(.van-divider--vertical) {
  height: 30px;
}

:deep(.van-hairline--bottom:after) {
  border-bottom-width: none;
}
</style>
